<template>
  <div
    v-if="tabList.length > 0"
    class="seckill_warp"
    :class="{
      mini: tabList.length == 5,
      superMini: tabList.length > 5,
      seckill: seckillData.type == 2,
      height: seckillData.type == 1,
      no_fixed_seckill: !isFixed,
      fixed_seckill: isFixed
    }"
  >
    <van-tabs
      v-if="tabList && tabList.length > 0"
      v-model="currentTab"
      sticky
      :offset-top="0"
      :line-width="lineWidth"
      @scroll="scrollhandler"
      @click="changeTab"
    >
      <van-tab v-for="(value, index1) in tabList" :key="value.id">
        <template slot="title">
          <p
            :class="{
              active: currentTab == index1,
              title: seckillData.type == 2,
              height_title: seckillData.type == 1
            }"
          >
            <span>{{ value.title }}</span>
            <span v-if="seckillData.type == 2" class="status">
              {{ value.status == 0 ? '即将开始' : '抢购中' }}
            </span>
          </p>
        </template>
      </van-tab>
      <!-- 一行一个 -->
      <template v-if="seckillData.type == 2">
        <div
          v-if="
            tabList.length > 0 &&
              tabList[currentTab].campaignProductList.length > 0
          "
          class="product_list"
        >
          <product-one-col
            v-for="(item, index) in tabList[currentTab].campaignProductList"
            :key="item.id"
            :product="item"
            :seckillStatus="tabList[currentTab].status"
            :isVerticalNav="false"
            @addToCart="addToCart(item, index)"
            @shareProduct="shareProduct(item, index)"
            @goProductDetail="goProductDetail(item, index)"
          />
        </div>
      </template>
      <!-- 一行两个 -->
      <template v-if="seckillData.type == 1">
        <product-two-col
          v-for="(item, index) in tabList[currentTab].campaignProductList"
          :key="item.id"
          :product="item"
          :isVerticalNav="false"
          @addToCart="addToCart(item, index)"
          @shareProduct="shareProduct(item, index)"
          @goProductDetail="goProductDetail(item, index)"
        />
      </template>
    </van-tabs>
    <div
      v-if="isNeedShowMore && tabList[currentTab].hasNextPage"
      class="load_more_btn"
      :style="{ borderColor: buttonColor, color: buttonColor }"
      @click="loadMore"
    >
      <span>查看更多</span>
    </div>
  </div>
</template>
<script>
import productOneCol from './productOneCol.vue';
import productTwoCol from './productTwoCol.vue';

export default {
  name: 'seckill',
  components: { productOneCol, productTwoCol },
  props: {
    seckillData: {
      type: Object,
      default() {
        return {};
      }
    },
    seckilltabList: {
      type: Array,
      default() {
        return [];
      }
    },
    currentFloorIndex: {
      type: Number,
      default: 0
    },
    buttonColor: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      tabList: [],
      type: 1,
      currentTab: 0, // 当前选中的tab
      floorId: '', // 楼层id
      lineWidth: 20,
      currentList: [],
      isFixed: false,
      isNeedShowMore: true // 是否展示 “查看更多”  的按钮
    };
  },
  watch: {
    /**
     * 第一个是handler 其值是一个回调函数。即监听到变化时应该执行的函数。
     * 第二个是deep：其值是true或false；确认是否深入监听。【一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到】 对象数组还是需要的
     * 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数
     */
    seckilltabList: {
      handler(newList, oldList) {
        console.log('newList===', newList, oldList);
        this.handleTabListData(newList);
      },
      deep: true
    }
  },
  mounted() {
    this.floorId = this.seckillData.floorId;
    this.isNeedShowMore = !this.seckillData.mshopLinkData;
    this.lineWidth = this.seckillData.type == 2 ? 0 : 20;
    console.log('seckilltabList==', this.seckilltabList);
    this.handleTabListData(this.seckilltabList);
    console.log('tabList==', this.tabList);
  },
  methods: {
    handleTabListData(list) {
      this.tabList = list.map(item => {
        const newItem = { ...item };
        newItem.pageNum =
          item.campaignProductList && item.campaignProductList.length > 0
            ? 1
            : 0;
        if (this.seckillData.type == 2) {
          if (item.startTime.includes(' ')) {
            item.startTime = item.startTime.split(' ')[1];
          }
          newItem.title = item.startTime
            .split(':')
            .slice(0, 2)
            .join(':');
          // 0未开始  1进行中  2 已结束
          newItem.status = Number(item.distanceStartTime) > 0 ? 0 : 1;
        } else {
          newItem.title = item.categoryName;
        }
        return newItem;
      });
    },
    scrollhandler(obj) {
      this.isFixed = obj.isFixed;
    },
    // 获取当前激活tab
    changeTab(index) {
      if (
        !(
          this.tabList[this.currentTab].campaignProductList &&
          this.tabList[this.currentTab].campaignProductList.length > 0
        )
      ) {
        this.$emit(
          'changeTab',
          this.tabList[index],
          this.floorId,
          this.currentFloorIndex
        );
      }
    },
    loadMore() {
      if (this.tabList[this.currentTab].hasNextPage) {
        this.$emit(
          'loadMore',
          this.tabList[this.currentTab],
          this.floorId,
          this.currentFloorIndex
        );
      }
    },
    // 加入购物车
    addToCart(data) {
      this.$emit('addToCart', data);
    },
    // 分享商品
    shareProduct(data) {
      this.$emit('shareProduct', data);
    },
    // 进入详情页
    goProductDetail(data) {
      this.$emit('goProductDetail', data);
    }
  }
};
</script>
<style lang="scss">
.seckill_warp {
  .van-tabs__line {
    background-color: #ff1010 !important;
  }
}
.mini {
  .van-tabs__wrap--scrollable {
    .van-tab {
      flex-basis: 20% !important;
    }
  }
}
.superMini {
  .van-tabs__wrap--scrollable {
    .van-tab {
      flex-basis: 18% !important;
    }
  }
}
.height {
  .van-tabs__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 0 10px;
  }
}
.no_fixed_seckill {
  .van-tabs__wrap {
    margin: 0 10px;
    border-radius: 6px;
  }
}
.fixed_seckill {
  .van-tabs__wrap {
    margin: 0;
    border-radius: 0;
  }
}
</style>

<style lang="scss" scoped>
.seckill_warp {
  margin-bottom: 10px;
  .product_list {
    margin-top: 10px;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .product-two-col_warp {
    margin-top: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .title {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333333;
    padding-top: 3px;
    .status {
      font-size: 12px;
      font-family: PingFangSC-Semibold, PingFang SC;
      color: #999;
    }
  }
  .height_title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .active {
    color: #ff1010;
    .status {
      color: #ff1010;
    }
    span {
      color: #ff1010;
    }
  }
  .load_more_btn {
    width: 120px;
    height: 24px;
    border: 1px solid #ff1010;
    font-size: 12px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: #ff1010;
    border-radius: 12px;
    margin: 10px auto;
    line-height: 24px;
    text-align: center;
    // img {
    //   height: 12px;
    //   width: auto;
    //   margin-left: 4px;
    // }
  }
}
</style>
